<template>
	<view class="me">
		<!-- 头部资料卡 -->
		<view class="header">
			<image class="img" :src="IP + userInfo.url"></image>
			<view class="info">
				<view class="username">{{userInfo.userName}}</view>
				<view class="id">{{userInfo.phone}}</view>
			</view>
			<view class="status" v-if="isShow">
				{{location_status == 1 ? '任务中' : '待任务'}}
			</view>
		</view>

		<!-- 功能列表 -->
		<view class="list">
			<ListItem v-if="location_status == 1" text="我的任务" targetPage="./target/target"
				img="../../static/me/missing_info.png"></ListItem>
				<ListItem v-if="location_status == 1" text="位置信息" targetPage="./map/map"
					img="../../static/me/map.png"></ListItem>
			<ListItem text="人员走失信息填报" targetPage="./addLostPerson/addLostPerson" img="../../static/me/missing_info.png"
				:divide="true"></ListItem>
			<!-- <ListItem text="遗失人员智能识别" targetPage="./match/match" img="../../static/me/code.png" :divide="true"></ListItem> -->

			<ListItem text="个人资料" targetPage="./info/info" img="../../static/me/userInfo.png" :divide="!isShow">
			</ListItem>
			<view v-if="isShow">
				<ListItem text="志愿时长" targetPage="./volunteer/volunteer" img="../../static/me/volunteer.png"></ListItem>
				<ListItem text="学习时长" targetPage="./study/study" img="../../static/me/study.png"></ListItem>
				<ListItem text="积分兑换" targetPage="./integral/integral" img="../../static/me/change.png" :divide="true">
				</ListItem>

				<ListItem text="救援流程" targetPage="../study/flow/flow" img="../../static/study/flow.png"></ListItem>
				<ListItem text="救援须知" targetPage="../study/notice/notice" img="../../static/study/notice.png"></ListItem>
					<ListItem text="救援备忘录" targetPage="./memo/memo" img="../../static/me/memo.png" :divide="true"></ListItem>
			</view>
			<view @click="changeLoginStatus">
				<ListItem text="退出" img="../../static/me/logout.png" :divide="true"></ListItem>
			</view>
		</view>
	</view>
</template>

<script>
	import ListItem from '../../components/ListItem/ListItem.vue'
	import {
		mapState
	} from 'vuex'
	import {
		IP
	} from '../../network/requestUrl.js'
	import {
		getUserInfo
	} from '../../network/me.js'
	export default {
		components: {
			ListItem
		},
		data() {
			return {
				userInfo: {},
				IP,
				isShow: false,
				location_status: 0
			};
		},
		async onShow() {
			const result = await getUserInfo()
			console.log('用户信息', result.data[0])
			if (!result.flag) return;
			this.userInfo = result.data[0];
			this.$store.commit('setUserInfo', {
				...this.userInfo,
				userName: this.userInfo.name,
				user_id: this.userInfo.id,
				url: this.userInfo.url,
				phone: this.userInfo.phone
			})
			this.userInfo.userName = this.userInfo.name
			this.location_status = this.userInfo.location_status;
			console.log('------任务状态---', this.location_status)
			this.isShow = this.userInfo.role != "家属";
			// this.userInfo = this.$store.state.userInfo
			// this.userInfo.url = this.userInfo.url || "/static/index/test/header03.jpg";
			// this.isShow = this.$store.state.userInfo.role != "家属";
			// this.location_status = this.$store.state.userInfo.location_status
			console.log(this.$store.state.userInfo.location_status)
		},
		methods: {
			changeLoginStatus() {
				uni.showModal({
					title: '确定退出吗',
					success: (res) => {
						if (res.confirm) {
							this.$store.commit('setLogin', false)
							this.$store.commit('setUserInfo', '')
							this.$store.commit('init')
							clearInterval(this.$store.state.timer)
							console.log(this.$store.state.timer)
							uni.redirectTo({
								url: '../login/login',
							});
							// uni.clearStorageSync()
							this.removeStorage()
							// console.log(this.$store.state.userInfo.location_status)
						}
					}
				})
			},
			navTo(url) {
				uni.navigateTo({
					url: url
				})
			},
			removeStorage() {
				setTimeout(() => {
					uni.removeStorageSync('isLogin')
					uni.removeStorageSync('lostTarget')
					uni.removeStorageSync('userInfo')
					uni.removeStorageSync('activity')
				}, 0)
			}
		},
		computed: {
			...mapState(['isLogin'])
		}
	}
</script>

<style lang="scss" scoped>
	.me {
		position: absolute;
		width: 100%;
		height: 100%;
		background-color: $uni-bg-page;

		.header {
			display: flex;
			align-items: center;
			// margin-top: 5px;
			padding: 60px 10px 20px;
			background-color: white;
			color: $uni-text-color-inverse;
			position: relative;

			.img {
				width: 50px;
				height: 50px;
				border-radius: 5px;
			}

			.info {
				margin-left: 10px;

				.username {}

				.id {
					font-size: 12px;
				}
			}

			.status {
				position: absolute;
				padding: 0 10px;
				right: 30px;
				border-radius: 5px;
				// width: 70px;
				height: 30px;
				line-height: 30px;
				text-align: center;
				// border: 1px solid #FFFFFF;
				background-color: #1CBAB6;
				color: white;
				// &:active {
				// 	background-color: #F2F2F2;
				// }
			}
		}

		.list {
			margin: 10px 0;
			padding-bottom: 60px;
		}

		.section {
			margin: 10px 0;
			background-color: $uni-bg-color;
			display: flex;
			align-items: center;

			.aside {
				padding: 20px 0;
				width: 33.3%;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;

				&:active {
					background-color: #F2EEEE;
				}

				&:nth-of-type(n+2) {
					border-left: 1px solid $uni-bg-page;
				}

				.img {
					width: 30px;
					height: 30px;
					margin-bottom: 5px;
				}
			}
		}
	}
</style>
